import { await } from '@umijs/deps/compiled/signale';
import { Button, Card, Form, Input, message } from 'antd';
import { useForm } from 'antd/lib/form/Form';
import React, { useState } from 'react';
import request from 'umi-request';
import styles from './index.less';

export default function Page() {
  const [loading, setLoading] = useState<boolean>(false);
  const [form] = useForm();
  const handleNextStep = async () => {
    console.log('form:  ', form);
    try {
      const { location } = await form.validateFields();
      console.log('校验通过: ', location);
      // 请求接口
      setLoading(true);
      const { success, data } = await request.post('https://mock.yonyoucloud.com/mock/22118/baseline/api/tag-group/save', {
        data: {
          location
        }
      });
      if (success) {
        // 校验通过
        message.success('检测通过');
        window.postMessage({ step: 1 }, window.location.href);
      }
    } catch (error) {
      setLoading(false);
    }
  };

  return (
    <Card title="构建P版" className={styles.card}>
      <Form form={form}>
        <Form.Item
          name="address"
          label="P版地址"
          required
          rules={[{
            required: true,
            message: '请输入正确的地址'
          }]}
        >
          <Input placeholder="请输入构建P版的地址" />
        </Form.Item>
        <Form.Item className={styles.btnGroup}>
          <Button type="primary" onClick={handleNextStep} loading={loading}>下一步</Button>
          <Button>取消</Button>
        </Form.Item>
      </Form>
    </Card>
  );
}
